<script lang="ts" setup>
import { ref, onBeforeMount, nextTick, computed, type ComputedRef } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { AssistantProps, TableListType } from '@/type'
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  type CarouselApi,
} from '@/components/ui/carousel'
import AssistantDetailMobile from '@/components/AssistantDetailMobile.vue'
import { useAssistantListStore } from '@/store/assistantListStore'
import { getPlatformAssistantList, isIos, isAndroid } from '@/config'
import back from '@/components/ui/svgs/back.vue'
import 分享 from '@/icon/分享.svg'

const refresh = ref<boolean>(true)
const platformList: ComputedRef<string[]> = computed(() => {
  return Object.keys(AssistantList.value[currentAssistantKey.value]?.tableList)
})
const originalPlatform = ref<keyof TableListType>(
  isIos() ? 'iOS' : isAndroid() ? 'Android' : 'PC',
)
const AssistantList = ref<AssistantProps[]>([])
function changePlatform(plat: keyof TableListType): void {
  AssistantList.value = getPlatformAssistantList(plat)
}

const currentTopic = computed(() => {
  return AssistantList.value[currentAssistantKey.value]
})
const hdlShared = async () => {
  const key = currentTopic.value.key
  const url = `https://appstore.lazycat.cloud/_modules/assistant#/assistant/${key}`
  await navigator.share({
    title: currentTopic.value.title,
    text: currentTopic.value.introduction,
    url: url,
  })
}
// 初始化以及每次上下一章的初始化逻辑
// 父组件初始化AssistantList列表
function init(first?: boolean) {
  if (first) {
    changePlatform(originalPlatform.value as keyof TableListType)
    const index = AssistantList.value.findIndex(
      (item) => item.key + '' === route.params.id,
    )
    if (index === -1) {
      currentAssistantKey.value = 0
    } else {
      currentAssistantKey.value = index
    }
  } else {
    const plat = platformList.value.includes(originalPlatform.value)
      ? originalPlatform.value
      : platformList.value[0]
    changePlatform(plat as keyof TableListType)
  }
  totalRefresh()
}

function totalRefresh() {
  refresh.value = false

  nextTick(() => {
    refresh.value = true
  })
}
const carousel_ref = ref()
const currentAssistantKey = ref(0)
const route = useRoute()
const router = useRouter()
const { updateCompletedAssistantList } = useAssistantListStore()

const hasPrev = computed(() => {
  if (currentAssistantKey.value <= 0) {
    return false
  }
  return true
})
const hasNext = computed(() => {
  if (currentAssistantKey.value >= AssistantList.value.length - 1) {
    return false
  }
  return true
})

const hdlHomePage = () => {
  router.back()
}
const hdlPrev = () => {
  if (hasPrev.value) {
    currentAssistantKey.value--
  }
  carousel_ref.value.scrollPrev()
  const key = AssistantList.value[currentAssistantKey.value].key
  updateCompletedAssistantList(key)

  router.replace({
    name: 'assistant',
    params: { id: key },
  })
  init()
}

const hdlNext = () => {
  if (hasNext.value) {
    currentAssistantKey.value++
  }
  carousel_ref.value.scrollNext()

  const key = AssistantList.value[currentAssistantKey.value].key
  updateCompletedAssistantList(key)

  router.replace({
    name: 'assistant',
    params: { id: key },
  })
  init()
}

onBeforeMount(() => {
  init(true)
})
</script>

<template>
  <div class="assistantDetailMobile w-full h-full flex flex-col">
    <div class="h-[44px] px-[16px] flex items-center justify-between">
      <back @click="hdlHomePage" class="h-[20px] w-[11px] select-none fill-black"
 />
      <div class="flex text-[#202020] text-[18px] font-[500] leading-[25px]">
        <div class="max-w-[200px] truncate">{{ currentTopic.title }}</div>
        ({{ currentAssistantKey + 1 }}/{{ AssistantList.length }})
      </div>
      <div class="w-[18px] h-[18px]" @click="hdlShared">
        <img draggable="false" class="h-full w-full select-none" :src="分享" />
      </div>
    </div>
    <div class="flex-1 w-full min-h-0">
      <Carousel
        class="relative w-full h-full"
        ref="carousel_ref"
        :opts="{
          watchDrag: false,
          loop: false,
          startIndex: currentAssistantKey,
        }"
      >
        <CarouselContent>
          <CarouselItem v-for="(item, index) in AssistantList" :key="index">
            <AssistantDetailMobile
              @update:platform="changePlatform"
              @update:mdAndImg="totalRefresh"
              @update:hdlPrev="hdlPrev"
              @update:hdlNext="hdlNext"
              :key="item.key"
              :title="item.title"
              :introduction="item.introduction"
              :thumbnail="item.thumbnail"
              :contentList="item.contentList"
              :AssistantList="AssistantList"
              :refresh="refresh"
              :currentAssistantKey="currentAssistantKey"
              :tableList="item.tableList"
            />
          </CarouselItem>
        </CarouselContent>
      </Carousel>
    </div>
  </div>
</template>
<style scoped>
/* Hide scrollbar for Chrome, Safari and Opera */
.assistantDetailMobile .scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.assistantDetailMobile .scrollbar-hidden {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
</style>
